import React, { Component } from 'react'

import { connect } from 'react-redux'
import { add, minus, asyncMinus, asyncSetName } from '../store/actionCreator'
// import * as actionCreators from '../store/actionCreator'

import { bindActionCreators } from 'redux'

class Brother1 extends Component {
  state = {
    name: ''
  }

  add1 = () => {
    // this.props.addNum(3)
    this.props.add(3)
  }

  minus1 = () => {
    // this.props.minusNum(2)
    this.props.minus(2)
  }

  sure = () => {
    // this.props.setName(this.state.name)
    this.props.asyncSetName(this.state.name)
  }

  render () {
    return (
      <div>
        Brother1
        <br />
        <br />
        <br />
        <button onClick={this.add1}>+</button>&nbsp;&nbsp;&nbsp;
        <button onClick={this.minus1}>-</button>
        <br />
        <br />
        <br />
        <input
          value={this.state.name}
          onChange={e => this.setState({ name: e.target.value })}
          type='text'
        />
        &nbsp;&nbsp;
        <button onClick={this.sure}>确定</button>
      </div>
    )
  }
}

// dispatch === store.dispatch
const mapDispatchToProps = dispatch => {
  // 这个返回的对象是作为 Brother1的 props
  // return {
  //   addNum: function (num) {
  //     dispatch(add(num))
  //   },
  //   minusNum (num) {
  //     dispatch(asyncMinus(num))
  //   },
  //   setName (name) {
  //     dispatch(asyncSetName(name))
  //   }
  // }
  // return bindActionCreators(actionCreators, dispatch)
}

// export default connect(null, mapDispatchToProps)(Brother1)

export default connect(null, { add, minus, asyncSetName })(Brother1)
